<template>
  <el-dialog
    title="请假申请"
    append-to-body
    :visible.sync="show"
    width="30%"
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <!-- 对话框(添加 / 修改) -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="请假时间" prop="qjtime">
        <el-date-picker
          v-model="form.qjtime"
          type="datetimerange"
          value-format="yyyy-MM-dd[T]HH:mm:ss.sss[Z]"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getLeaveDays"
          size="small"
          class="leaveDate"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请假天数" prop="leaveDays">
        <el-input v-model="form.leaveDays" disabled size="small" />
      </el-form-item>
      <el-form-item label="请假类型" prop="reasonId">
        <el-select v-model="form.reasonId" placeholder="请选择">
          <el-option
            v-for="dict in leaveTypeList"
            :key="dict.id"
            :label="dict.leaveReason"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="原因" prop="leaveExplain">
        <el-col>
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.leaveExplain"
            placeholder="请输入原因"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="审批人" prop="copySendId">
        <el-select v-model="form.copySendId" placeholder="请选择">
          <el-option
            v-for="dict in sendList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提 交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

  <script>
import { createAttendanceLeaveReason, getStuentSendList, getLeaveType } from "@/api/studentSide/leave"
import { getDictDatas, DICT_TYPE } from '@/utils/dict'

export default {
  name: "LeaveCreate",
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  components: {
  },
  data() {
    return {
      // 表单参数

      form: {
        qjtime: undefined,
        leaveStartTime: undefined,
        leaveEndTime: undefined,
        type: undefined,
        leaveExplain: undefined,
        leaveDays: undefined,
      },
      // 表单校验
      rules: {
        qjtime: [{ required: true, message: "请假时间不能为空", trigger: "blur" }],
        reasonId: [{ required: true, message: "请假类型不能为空", trigger: "change" }],
        leaveExplain: [{ required: true, message: "请假原因不能为空", trigger: "change" }],
        copySendId: [{ required: true, message: "审核人不能为空", trigger: "change" }],
      },
      sendList: [],
      leaveTypeList: [],
    };
  },
  created() {
    this.getLeaveTypeList();
    this.getData();
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        this.form.userId = this.$store.getters.userId;
        // 添加的提交
        createAttendanceLeaveReason(this.form).then(response => {
          this.$modal.msgSuccess("提交成功");
          this.$emit("success");
          this.$emit('update:show', false)
        });
      });
    },
    //获取审批人员列表
    async getData() {
      const id = this.$store.getters.userId;
      let res = await getStuentSendList(id);
      let teacheType = { 1: "班主任", 2: "辅导员", 3: "普通教师" };
      res.data.forEach((item, key) => {
        res.data[key].name = teacheType[item.teacherUserType] + "-" + item.teacherName;
      })
      this.sendList = res.data;
    },
    //获取日期组件选择
    getLeaveDays(data) {
      let start = new Date(data[0]).getTime();
      let end = new Date(data[1]).getTime();
      this.form.leaveStartTime = start;
      this.form.leaveEndTime = end;
      let times = end - start;
      let day = (times / (24 * 1000 * 3600)).toFixed(1);
      this.form.leaveDays = day;
    },
    /** 取消按钮 */
    cancel() {
      this.$emit('update:show', false)
      this.reset();
    },
    getLeaveTypeList() {
      getLeaveType().then(res => {
        this.leaveTypeList = res.data
      })
    },
    reset() {
      this.form = {
        qjtime: undefined,
        startTime: undefined,
        endTime: undefined,
        type: undefined,
        leaveExplain: undefined,
        leaveDays: undefined,
      };
      this.resetForm("form");
    }
  }
};

  </script>
  <style lang="scss">
.leaveDate.el-input__inner {
  width: 320px;
}
</style>
